<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>单元管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/lib/layui-v2.6.3/css/layui.css" media="all">
  <link rel="stylesheet" href="/css/public.css" media="all">
  <link rel="stylesheet" href="/lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
</head>
<body>
<div class="layuimini-container">
  <div class="layuimini-main">
    <fieldset class="table-search-fieldset">
      <div style="margin: 10px 10px 10px 10px">
        <form class="layui-form layui-form-pane" action="">
          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">车位类型</label>
              <div class="layui-input-inline">
                <select name="name" lay-filter="aihao">
                  <option value="">请输入车位类型</option>
                  <option value="0">闲置车位</option>
                  <option value="1">占用车位</option>
                </select>
              </div>
            </div>
            <div class="layui-inline">
              <button type="submit" class="layui-btn" lay-submit lay-filter="data-search-btn"><i
                      class="layui-icon"></i> 搜 索
              </button>
              <button type="submit" class="layui-btn" lay-submit lay-filter="data-add-btn"><i
                      class="fa fa-plus"></i> 添 加
              </button>
            </div>
          </div>
        </form>
      </div>
    </fieldset>

    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container"></div>
    </script>

    <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

    <script type="text/html" id="currentTableBar">
<%--      <a class="layui-btn layui-btn-xs data-count-delete" lay-event="message">分配信息</a>--%>
      <a class="layui-btn layui-btn-xs data-count-delete" {{(d.status=='0')?'style="cursor:not-allowed"':'lay-event="message"'}}">分配信息</a>
      <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">修改</a>
      <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
    </script>

  </div>
</div>
<script type="text/html" id="currentTableinfo">
  <table class="layui-hide" id="information" lay-filter="currentTableFilter"></table>
</script>
<!-- 添加表单弹窗 -->
<script type="text/html" id="modelAdd">
  <form id="modelAddForms" lay-filter="modelAddForm" class="layui-form model-form">
    <div class="layui-form-item">
      <label class="layui-form-label">车位名</label>
      <div class="layui-input-block">
        <input name="name" placeholder="请输入车位名" type="text" class="layui-input" maxlength="20"
               lay-verType="tips" lay-verify="required" required/>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">类型</label>
      <div class="layui-input-block">
        <select name="type" lay-verType="tips" lay-verify="required" required>
          <option value="">请选择车位类型</option>
          <option value="0">地上</option>
          <option value="1">地下</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-primary" type="reset" id="closeBtn">重置</button>
        <button class="layui-btn" lay-filter="modelSubmitAdd" lay-submit>保存</button>
      </div>
    </div>
  </form>
</script>
<!-- 修改表单弹窗 -->
<script type="text/html" id="modelEdit">
  <form id="modelEditForms" lay-filter="modelEditForm" class="layui-form model-form">
    <input type="hidden" name="id" id="id">
    <input type="hidden" name="status" id="status">
    <div class="layui-form-item">
      <label class="layui-form-label">车位名</label>
      <div class="layui-input-block">
        <input name="name" id="name"  type="text" class="layui-input" maxlength="20"
               lay-verType="tips" lay-verify="required" required/>
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">类型</label>
      <div class="layui-input-block">
        <select name="type" id="type" lay-verType="tips" lay-verify="required" required>
          <option value="0">地上</option>
          <option value="1">地下</option>
        </select>
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn layui-btn-primary" type="reset">重置</button>
        <button class="layui-btn" lay-filter="modelSubmitEdit" lay-submit>保存</button>
      </div>
    </div>
  </form>
</script>
<%--单元列表--%>
<script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="/js/sessionTimout.js" charset="utf-8"></script>
<script>
  layui.use(['form', 'table'], function () {
    var $ = layui.jquery,
            form = layui.form,
            table = layui.table;

    // 表格渲染
    table.render({
      elem: '#currentTableId',
      url: '/CarServlet?opt=list',
      toolbar: '#toolbarDemo',
      defaultToolbar: ['filter', 'exports', 'print', {
        title: '提示',
        layEvent: 'LAYTABLE_TIPS',
        icon: 'layui-icon-tips'
      }],
      cols: [[
        {title: 'ID', field: 'id',},
        {field: 'name', title: '车位名',sort: true},
        {
          field: 'status', title: '车位状态', sort: true, templet: function (row) {
            if (row.status === 1) {
              return '<input type="checkbox" lay-text="已有车|未有车" lay-skin="switch" checked disabled>'
            } else {
              return '<input type="checkbox" lay-text="已有车|未有车" lay-skin="switch" disabled>'
            }
          }
        },
        {
          field: 'type', title: '类型', sort: true, templet: function (row) {
            if (row.type == 0) {
              return '<input type="checkbox" lay-text="地上|地下" lay-skin="switch" checked disabled>'
            } else {
              return '<input type="checkbox" lay-text="地上|地下" lay-skin="switch" disabled>'
            }
          }
        },
        {title: '操作', minWidth: 150, toolbar: '#currentTableBar', align: "center"}
      ]],
      limits: [10, 20, 30, 40, 50],
      limit: 10,
      page: true,
      skin: 'line'
    });
    // 监听搜索操作
    form.on('submit(data-search-btn)', function (data) {  // data 表单数据对象 name键 value值
      //执行搜索重载
      table.reload('currentTableId', {
        page: {
          curr: 1
        }
        , where: {
          name: data.field.name
        }
      }, 'data');
      return false;
    });
    // 监听添加操作
    form.on('submit(data-add-btn)', function (data) {  // data 表单数据对象 name键 value值
      // 打开添加对话框
      showAddModel();
      return false;
    });
    // 显示添加表单弹窗
    function showAddModel() {
      // 打开弹窗
      layer.open({
        type: 1,
        title: '添加车位',
        content: $('#modelAdd').html(),
        success: function (layero, dIndex) {
          $(layero).children('.layui-layer-content').css('overflow', 'visible');
          // 表单提交事件
          form.render();
          form.on('submit(modelSubmitAdd)', function (data) {  // 表单数据对象
            layer.load(2);
            $.ajax({
              url: '/CarServlet?opt=add',
              type: "POST",
              data: data.field,
              dataType: "json",
              success: function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                  layer.close(dIndex);
                  layer.msg(data.msg, {icon: 1});
                  // 刷新表格
                  //执行搜索重载
                  table.reload('currentTableId')
                } else {
                  layer.msg(data.msg, {icon: 2});
                }
              }
            })
            return false;
          });
        }
      });
    }
    // 监听修改删除
    table.on('tool(currentTableFilter)', function (obj) {
      var data = obj.data;
      if (obj.event === 'edit') {
        showEditModel(data);
        return false;
      } else if (obj.event === 'delete') {
        layer.confirm(`确定要删除"\${data.name}"吗?`, function (index) {
          $.getJSON('/CarServlet?opt=delete', `id=\${data.id}`, function (data) {
            if (data.code == 0) {
              layer.close(index);
              layer.msg(data.msg, {icon: 1});
              // 刷新数据
              table.reload('currentTableId')
            } else {
              layer.msg(data.msg, {icon: 2});
            }
          })

        });
      }else if(obj.event === 'message'){
          let $a = $(obj.tr).find('a[lay-event="message"]');
        let offset = $a.offset();
        layer.open({
          type: 1,
          area: '690px',
          offset: ['100px', (offset.left - 860 + $a.outerWidth()) + 'px'],
          content: $('#currentTableinfo').html(),
          success: function (layero, dIndex) {
            table.render({
              elem: '#information',
              url: '/CarServlet?opt=uerCarList&id='+data.id,
              cols: [[
                {title: 'ID', field: 'id', type: 'numbers'},
                {field: 'userId', title: '使用者ID', sort: true},
                {field: 'username', title: '使用者', sort: true},
                {field: 'intime', title: '使用开始时间', sort: true},
                {field: 'outtime', title: '使用结束时间', sort: true},
              ]],
              limits: [2, 4, 6, 8, 10],
              limit: 2,
              page: true,
              skin: 'line'
            });
          }
        })
      }
    });
    // 显示修改表单弹窗
    function showEditModel(data) {
      // 打开弹窗
      layer.open({
        type: 1,
        title: '修改车位',
        content: $('#modelEdit').html(),
        success: function (layero, dIndex) {
          // 绑定数据 | ajax request
          $('#id').val(data.id)
          $('#name').val(data.name)
          $('#type').val(data.type)
          $('#status').val(data.status)
          $(layero).children('.layui-layer-content').css('overflow', 'visible');
          // 表单提交事件
          form.render();
          form.on('submit(modelSubmitEdit)', function (data) {  // 表单数据对象
            layer.load(2);
            $.ajax({
              url: '/CarServlet?opt=edit',
              type: "POST",
              data: data.field,
              dataType: "json",
              success: function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                  layer.close(dIndex);
                  layer.msg(data.msg, {icon: 1});
                  // 刷新表格
                  //执行搜索重载
                  table.reload('currentTableId')
                } else {
                  layer.msg(data.msg, {icon: 2});
                }
              }
            })
            return false;
          });
        }
      });
    }

  })
   </script>
</body>
</html>